<template>
  <div class="login-container">
    <div class="login-logo">
      <img src="../../assets/logo.png" alt="" />
    </div>
    <div class="login-box" v-if="cut">
      <!-- 验证码登录 -->
      <van-form ref="loginForm" @submit="onSubmit">
        <van-field
          v-model="user.mobile"
          label="手机号"
          center
          :border="false"
          label-width="4em"
          name="mobile"
          placeholder="请输入手机号"
          :rules="userFormRules.mobile"
          maxlength="11"
          type="number"
        >
          <template #left-icon>
            <van-icon class-prefix="iconfont iconshouji"></van-icon>
          </template>
        </van-field>
        <van-field
          v-model="user.code"
          label="验证码"
          center
          :border="false"
          label-width="4em"
          name="code"
          placeholder="请输入验证码"
          :rules="userFormRules.code"
          maxlength="6"
          type="number"
        >
          <template #left-icon>
            <van-icon class-prefix="iconfont iconyanzhengma"></van-icon>
          </template>
          <template #button>
            <van-count-down
              v-if="isCountDownShow"
              :time="1000 * 6"
              format="ss s"
              @finish="isCountDownShow = false"
            />
            <van-button
              v-else
              native-type="button"
              size="small"
              type="default"
              @click="onSendSms"
              >获取验证码</van-button
            >
          </template>
        </van-field>
        <van-button class="btn-add" block type="info" native-type="submit"
          >登录</van-button
        >
      </van-form>
    </div>
    <!-- 账号密码登录 -->
    <div class="login-box2" v-else>
      <van-form ref="loginForm" @submit="IdOnSubmit">
        <van-field
          v-model="userId.username"
          label="账号"
          center
          :border="false"
          label-width="4em"
          name="username"
          placeholder="请输入账号"
        >
          <template #left-icon>
            <van-icon class-prefix="iconfont iconshouji"></van-icon>
          </template>
        </van-field>
        <van-field
          v-model="userId.password"
          label="密码"
          center
          :border="false"
          label-width="4em"
          name="password"
          placeholder="请输入密码"
          type="password"
        >
          <template #left-icon>
            <van-icon class-prefix="iconfont iconyanzhengma"></van-icon>
          </template>
        </van-field>
        <van-button class="btn-add" block type="info" native-type="submitId"
          >登录</van-button
        >
      </van-form>
    </div>
    <div class="login-skip">
      <span @click="changeCut">{{ cut ? '账号密码' : '验证码' }}登录</span>
      <span>
        <span @click="$router.push('/register')">立即注册</span>
        <i class="long"></i>
        <span>忘记密码</span>
      </span>
    </div>
    <!-- 温馨提示 -->
    <div class="warmPrompt" v-if="addressData.length !== 0">
      <p>
        温馨提示: 华信云盛公司发来了付《人事合同》, 截止签约时间至2021-03-05
        23:59。
      </p>
    </div>
  </div>
</template>

<script>
import { login, sendSms, userName, IdLogin } from '@/api/user'
export default {
  name: 'LoginPage',
  data() {
    return {
      // 手机号登录
      user: {
        mobile: '17608413251',
        code: ''
      },
      // 账号密码登录
      userId: {
        username: 'zenghuan',
        password: ''
      },
      // 验证
      userFormRules: {
        // 手机号验证规则
        mobile: [
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确手机号'
          },
          {
            required: true,
            message: '手机号不能为空'
          }
        ],
        // 验证码
        code: [
          {
            required: true,
            message: '验证码不能为空'
          },
          {
            pattern: /^\d{6}$/,
            message: '验证码格式错误'
          }
        ]
      },
      // 倒计时
      isCountDownShow: false,
      // 链接参数
      addressData: [],
      // 登录切换
      cut: true
    }
  },
  created() {
    // this.$route.query = this.addressData
  },
  mounted() {},
  methods: {
    // 手机登录
    async onSubmit() {
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      try {
        // 登录
        await login(this.user).then(res => {
          if (res.data.code !== '0') {
            return this.$toast.fail(res.data.msg)
          }
          this.$store.commit('setUser', res.data.data)
        })
      } catch (error) {
        console.log(error)
      }
      try {
        // 获取用户信息
        await userName().then(res => {
          console.log(res)
          if (res.data.code !== '0') {
            return this.$toast.fail(res.date.msg)
          }
          this.$store.commit('setUserName', res.data.data)
        })
        // 页面跳转
        if (this.addressData.length !== 0) {
          this.$router.push('/sign')
          this.$toast.success('登录成功')
        } else {
          this.$router.push('/layout')
          this.$toast.success('登录成功,首页')
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 验证手机验证码
    async onSendSms() {
      // 倒计时
      this.isCountDownShow = true
      // 请求验证码
      try {
        await sendSms(this.user.mobile).then(res => {
          if (res.data.code !== '0') {
            // 发送失败，关闭倒计时
            this.isCountDownShow = false
            return this.$toast.fail(res.data.msg)
          }
          this.$toast.success(res.data.msg)
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 账号登录
    async IdOnSubmit() {
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      try {
        await IdLogin(this.userId).then(res => {
          if (res.data.code !== '0') {
            return this.$toast.fail(res.data.msg)
          }
          this.$store.commit('setUser', res.data.data)
        })
      } catch (error) {
        console.log(error)
      }
      try {
        // 获取用户信息
        await userName().then(res => {
          if (res.data.code !== '0') {
            return this.$toast.fail('数据获取失败')
          }
          this.$store.commit('setUserName', res.data.data)
        })
        // 页面跳转
        if (this.addressData.length !== 0) {
          this.$router.push('/sign')
          this.$toast.success('登录成功')
        } else {
          this.$router.push('/layout')
          this.$toast.success('登录成功,首页')
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 改变登录方式
    changeCut() {
      this.$refs.loginForm.resetValidation()
      this.cut = !this.cut
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  position: relative;
  padding: 0 60px;
  .login-logo {
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 181px;
      height: 244px;
    }
  }
  // 验证码登录
  .login-box {
    height: 450px;
    .van-cell {
      height: 128px;
      font-size: 30px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #e4e4e4;
    }
    /deep/.van-field__label {
      color: #101010;
    }
    .btn-add {
      height: 96px;
      margin-top: 70px;
      font-size: 34px;
    }
    .van-button--small {
      color: #a5a5a5;
    }
    /deep/.van-field__left-icon {
      margin-right: 20px;
    }
    .iconfont {
      font-size: 30px;
    }
  }
  // 账号
  .login-box2 {
    height: 450px;
    .van-cell {
      height: 128px;
      font-size: 30px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #e4e4e4;
    }
    /deep/.van-field__label {
      color: #101010;
    }
    /deep/.van-field__left-icon {
      margin-right: 20px;
    }
    .btn-add {
      height: 96px;
      margin-top: 70px;
      font-size: 34px;
    }
    .iconfont {
      font-size: 30px;
    }
  }
  .login-skip {
    font-size: 26px;
    color: #a5a5a5;
    display: flex;
    justify-content: space-between;
    .long {
      display: inline-block;
      height: 27px;
      width: 1px;
      background-color: #b2b2b2;
      margin: 0 20px -3px;
    }
  }
  // 温馨提示
  .warmPrompt {
    height: 113px;
    margin-top: 225px;
    background-color: #ececec;
    p {
      font-size: 24px;
      color: #696969;
      padding: 23px 29px;
      line-height: 35px;
    }
  }
}
</style>
